<div class="container clearfix">
    <!--Breadcrumb-->
    <div class="breadcrumb clearfix">
        <a href="#">Right Choice</a><span>Account Login</span>
    </div>
    <div class="login-div container">
        <div class="span4">
            <h3 class="block-title">Account Login</h3>

            <div class="ruler">
            </div>
            <form method="post" action="#" class="form-login">
                <div class="control-group">
                    <label class="control-label" for="inputEmail">Email<span class="required">*</span></label>
                    <input type="text" id="inputEmail" placeholder="Email">
                </div>
                <div class="control-group">
                    <label class="control-label" for="inputPassword">Password<span class="required">*</span></label>
                    <input type="password" id="inputPassword" placeholder="Password">
                </div>
                <div class="control-group">
                    <label class="control-label" for="inputPassword">&nbsp;</label><input type="checkbox"> Remember
                </div>
                <input type="submit" value="Login" class="btn btn-large btn-danger"/>
            </form>
        </div>
        <div class="span4">
            <h3 class="block-title">Create account</h3>

            <div class="ruler">
            </div>
            <form method="post" action="#" class="form-login">
                <h4>Please enter your email to create an account.</h4>

                <p>
                </p>

                <div class="control-group">
                    <label class="control-label" for="inputEmail">Email<span class="required">*</span></label>
                    <input type="text" id="inputEmail" placeholder="Email">
                </div>
                <input type="submit" value="Create an account" class="btn btn-large btn-danger"/>
            </form>
        </div>
        <div class="span4">
            <h3 class="block-title">Login with Facebook</h3>
            <script>
                window.fbAsyncInit = function() {
                    FB.init({
                        appId      : '638949436155109',
                        status     : true, // check login status
                        cookie     : true, // enable cookies to allow the server to access the session
                        xfbml      : true  // parse XFBML
                    });

                    // Here we subscribe to the auth.authResponseChange JavaScript event. This event is fired
                    // for any authentication related change, such as login, logout or session refresh. This means that
                    // whenever someone who was previously logged out tries to log in again, the correct case below
                    // will be handled.
                    FB.Event.subscribe('auth.authResponseChange', function(response) {
                        // Here we specify what we do with the response anytime this event occurs.
                        if (response.status === 'connected') {
                            // The response object is returned with a status field that lets the app know the current
                            // login status of the person. In this case, we're handling the situation where they
                            // have logged in to the app.
                            testAPI();
                        } else if (response.status === 'not_authorized') {
                            // In this case, the person is logged into Facebook, but not into the app, so we call
                            // FB.login() to prompt them to do so.
                            // In real-life usage, you wouldn't want to immediately prompt someone to login
                            // like this, for two reasons:
                            // (1) JavaScript created popup windows are blocked by most browsers unless they
                            // result from direct interaction from people using the app (such as a mouse click)
                            // (2) it is a bad experience to be continually prompted to login upon page load.
                            FB.login();
                        } else {
                            // In this case, the person is not logged into Facebook, so we call the login()
                            // function to prompt them to do so. Note that at this stage there is no indication
                            // of whether they are logged into the app. If they aren't then they'll see the Login
                            // dialog right after they log in to Facebook.
                            // The same caveats as above apply to the FB.login() call here.
                            FB.login();
                        }
                    });
                };

                // Load the SDK asynchronously
                (function(d){
                    var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
                    if (d.getElementById(id)) {return;}
                    js = d.createElement('script'); js.id = id; js.async = true;
                    js.src = "//connect.facebook.net/en_US/all.js";
                    ref.parentNode.insertBefore(js, ref);
                }(document));

                // Here we run a very simple test of the Graph API after login is successful.
                // This testAPI() function is only called in those cases.
                function testAPI() {
                    console.log('Welcome!  Fetching your information.... ');
                    FB.api('/me', function(response) {
                        console.log('Good to see you, ' + response.name + '.');
                    });
                }
            </script>
            <div class="ruler">
            </div>
            <div class="facebook-div">
                <a href="#" class="login-facebook">
                    <i class="icon-facebook large icon-align-left"></i> Login with facebook </a>
                <fb:login-button show-faces="true" width="200" max-rows="1"></fb:login-button>
                <p>
                    We won't post anything without your permission.
                </p>
            </div>
        </div>
    </div>
</div>
